<template>
  <base-panel-lg class="home-energy-ranking" title="能耗用量总览">
    <template #right-btn>
      <base-btn class="more">更多</base-btn>
    </template>
    <div class="info-cont">
      <base-panel-info :sum="12360" unit="kW·h" :chain="30.62" :year-over="23.42"></base-panel-info>
      <div class="chart-toolbar">
        <span class="chart-title">用电排名</span>
        <span class="chart-btns">
          <span class="chart-btn">教室</span>
          <span class="chart-btn">实验室</span>
          <span class="chart-btn active">宿舍</span>
        </span>
      </div>
      <v-chart class="bar" :options="option" />
    </div>
  </base-panel-lg>
</template>

<script>
import BasePanelLg from './BasePanelLg.vue';
import BasePanelInfo from './BasePanelInfo.vue';
import BaseBtn from './BaseBtn.vue';

export default {
  components: {
    BasePanelLg,
    BaseBtn,
    BasePanelInfo,
  },

  data() {
    return {
      option: {
        color: ['#f5cb77'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: 5,
          top: 25,
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['101室', '304室', '304室', '291室', '287室', '237室'],
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLabel: {
              color: '#5a8bd6',
              fontSize: 10,
              interval: 0,
            },
            axisLine: {
              lineStyle: {
                color: '#52556a',
              },
            },
          },
        ],
        yAxis: [
          {
            max: 450,
            min: 0,
            interval: 150,
            // min: 0,
            // scale: false,
            type: 'value',
            splitLine: { show: false },
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLabel: {
              color: '#fff',
            },
            axisLine: {
              lineStyle: {
                color: '#52556a',
                fontSize: 11,
              },
            },
          },
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '10',
            data: [392, 326, 291, 287, 237, 183],
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
              },
            },
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#f4cf79' },
                  { offset: 1, color: '#fb8e5e' },
                ],
              },
            },
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.home-energy-ranking {
  height: 28.444vh;
  margin-bottom: 2.037vh;
}

.more {
  color: #46c8cc;
  text-decoration: underline;
  // margin-left: 1vw;
}

.info-cont {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 6.296vh;
  bottom: 0;
  left: 0;
  right: 0;
}

.bar {
  flex-grow: 1;
  width: 100%;
  height: 100%;
}

.chart-toolbar {
  height: 3.888vh;
  // position: absolute;
  // top: 8vh;
  // left: 0;
  // right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5vh 2.3vw 0 0.781vw;
  z-index: 10;
}

.chart-title {
  font-size: 0.885vw;
  margin-left: 1vw;
}

.chart-btn {
  font-size: 0.677vw;
  color: #6b7199;
  cursor: pointer;
  margin-left: 0.99vw;
}

.chart-btn.active {
  color: #fff;
  font-size: 0.781vw;
}
</style>
